 /**
  * Title: szl_ViewPic
  * Ver: v1.0
  * Author: Shengzl
  * Intro:
  *  快捷键：
  *      ↑ 第一张
  *      ↓ 最后一张
  *      ← 左滑一张
  *      → 右滑一张
  *      + 放大
  *      - 缩小
  *      space 快速跳页
  *      esc 全局关闭弹窗
  *  配置：
  *      var option={};
  *      var v=new vp(option);
  *      v.Import("Filename_[1-20].png") => [ Filename_1.png , Filename_2.png , ... , Filename_20.png ]
  *      v.Init();
  */
 class vp {
     constructor(options = {}) {
         this._option = {
             //当前页数
             _index: 0,
             //当前缩放倍数
             _z: 1,
             //全局动画延时（毫秒）
             _sec: 300,
             //多个目录的话，path留空，_pics 中路径写完整即可
             _path: "./imgs/",
             //所有图片地址集合，使用 Import 方法导入
             _pics: [],
             //容器
             _bg: $("#bg"),
             //展示所有图片
             _all: $("#all"),
             //盛放图片的div
             _con: $("#img"),
             //盛放图片说明的label
             _lbl: $("#lbl"),
             //跳页input
             _go: $("#go")
         };
         $.extend(this._option, options);
     }

     Init() {
         this.Bind();
         this.pre(0);
         this.zt(this._option._z);
     }

     Import(filename) {
         //ex: kibana_[1-9].png
         try {
             var mat = filename.match(/\[[0-9\-]+\]/g)[0];
             var arr = mat.match(/[0-9]+/g);
             var oth = filename.split(mat);

             var l = parseInt(arr[0]);
             var r = parseInt(arr[1]);
             for (let i = l; i <= r; i++) {
                 this._option._pics.push(`${oth[0]}${i}${oth[1]}`);
             }
         } catch {
             this._option._pics.push(filename);
         }
     }

     Bind() {
         var t = this;

         $("body").on("keydown", function(e) {
             //← 37
             //↑ 38
             //→ 39
             //↓ 40
             console.log(e.keyCode)
             if (e.keyCode == 37) {
                 //左滑一张
                 t.pre();
             } else if (e.keyCode == 39) {
                 //右滑一张
                 t.next();
             } else if (e.keyCode == 38) {
                 //第一张
                 t.pre(0);
             } else if (e.keyCode == 40) {
                 //最后一张
                 t.next(t._option._pics.length - 1);
             } else if (e.keyCode == 107) {
                 //放大
                 t.zi();
             } else if (e.keyCode == 109) {
                 //缩小
                 t.zo();
             } else if (e.keyCode == 32) {
                 //跳页
                 t._option._go.focus();
                 t._option._go.animate({
                     top: 0
                 }, t._option._sec);
             } else if (e.keyCode == 27) {
                 //关闭所有弹窗
                 //关闭快跳
                 t._option._go.animate({
                     top: "-10%"
                 }, t._option._sec, () => t._option._go.val(""));
                 //关闭速览
                 t._option._all.animate({
                     top: "-200%"
                 }, t._sec);
             } else if (e.keyCode == 192) {
                 t.showAll();
             }
         });

         t._option._go.on("keydown", function(e) {
             if (e.keyCode == 13) {
                 t._option._go.animate({
                     top: "-10%"
                 }, t._option._sec, function() {
                     try {
                         t.pt(parseInt(t._option._go.val()) - 1);
                     } catch {}
                     t._option._go.val("");
                 });
             } else if (e.keyCode == 27) {
                 t._option._go.animate({
                     top: "-10%"
                 }, t._option._sec)
             }
         });

         t._option._all.on("click", "img", function() {
             try {
                 var index = parseInt($(this).data("index"));
                 t.pt(index);
                 t._option._index = index;
             } catch {};

             t._option._all.animate({
                 top: "-200%"
             }, t._sec);
         });
     }

     /**
      * Show All
      */
     showAll() {
         var t = this._option;
         var path = t._path;
         var pics = t._pics;

         t._all.html("");
         for (let i = 0; i < pics.length; i++) {
             var el = pics[i];
             t._all.append(`<img data-index=${i} src="${path}${el}" />`);
         }

         t._all.animate({
             top: 0
         }, t._sec);
     }

     /**
      * pre 
      */
     pre(index = null) {
         var t = this._option;
         var path = t._path;
         var pics = t._pics;

         if (t._index == pics.length - 1 || index > pics.length1 - 1) return;
         index = index == null ? ++t._index : index;

         this.pt(index, "-100%");
     }

     /**
      * next
      */
     next(index = null) {
         var t = this._option;
         var path = t._path;
         var pics = t._pics;

         if (t._index == 0 || index < 0) return;
         index = index == null ? --t._index : index;
         this.pt(index);
     }

     /**
      * Page To 
      */
     pt(index, ml = "100%") {
         var t = this._option;
         var path = t._path;
         var pics = t._pics;
         if ((!index instanceof Number) || index > t._pics.length || index < 0) return;

         t._con.stop().animate({
             marginLeft: ml,
             opacity: "0"
         }, t._sec, function() {
             var url = `url(${path}${ pics[index]})`;
             t._con[0].style.backgroundImage = url;
             t._con.stop().animate({
                 marginLeft: "0"
             }, 1, function() {
                 t._con.stop().animate({
                     opacity: 1
                 }, t._sec);
             })

             t._lbl.text(`${pics[index]} (${index+1}/${pics.length})`);
         });
     }

     /**
      * Zoom In 
      */
     zi() {
         if (this._option._z >= 1.6) return;
         //this._option._bg[0].style.padding = `${--this._option._z}%`;
         this._option._z += 0.1;
         this._option._con[0].style.transform = `scale(${this._option._z})`;
     }

     /***
      * Zoom Out 
      */
     zo() {
         if (this._option._z <= 0.1) return;
         this._option._z -= 0.1;
         //this._option._bg[0].style.padding = `${++this._option._z}%`;
         this._option._con[0].style.transform = `scale(${this._option._z})`;
     }

     /**
      * Zoom To
      */
     zt(z) {
         if ((!z instanceof Number) || z > 100 || z < 0) return;
         this._option._bg[0].style.padding = `${z}%`;
     }

 }